<template>
  <div class="app-container">
    <!-- <div class="header_title_box">
      <h2>基本信息</h2>
    </div> -->
    <!-- 搜索 -->
    <div class="select_form_box">
      <div class="filter-container">
        <el-input v-model="queryParam.company_name" size="small" placeholder="客户名称" class="input-with-select mr16" @keyup.enter.native="getList()" />
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="getList()">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </div>
    <!-- 导出 -->
    <div class="operation_button_box">
      <el-button v-action="'logisticsTransportOrder@confirm'" size="small" type="primary" @click="handleConfirm">确认</el-button>
      <el-button v-action="'logisticsTransportOrder@export'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
    </div>
    <!-- 表格 -->
    <div v-loading="loading">
      <el-table :data="data" border fit :max-height="screenHeigh" @selection-change="handleSelectMulti">
        <el-table-column type="selection" width="51" align="center" />
        <el-table-column align="center" label="Tracking Number" prop="transport_order_no" width="187" />
        <el-table-column align="center" label="所属物流公司" prop="logistics_company" />
        <el-table-column align="center" label="订单编号" prop="order_no" width="150" />
        <el-table-column align="center" label="平台订单编号" prop="platform_order_no" width="170" show-overflow-tooltip />
        <el-table-column align="center" label="平台" prop="platform" />
        <el-table-column align="center" label="店铺名称" prop="shop_name" width="150" />
        <el-table-column align="center" label="SKU" prop="sku" width="170" show-overflow-tooltip />
        <el-table-column align="center" label="产品分类" prop="category_name" width="150" show-overflow-tooltip />
        <el-table-column align="center" label="Actual Weight" prop="actual_weight" />
        <el-table-column align="center" label="Billed Weight" prop="billed_weight" />
        <el-table-column align="center" label="zone" prop="zone" />
        <!-- <el-table-column label="运单号" prop="transport_order_no" align="center" min-width="190" />
        <el-table-column label="所属物流公司" prop="logistics_company" align="center" width="85" />
        <el-table-column label="所属发货单" prop="invoice_order_no" align="center" width="160" />
        <el-table-column label="订单编号" prop="order_no" align="center" width="147" />
        <el-table-column label="平台订单编号" prop="platform_order_no" align="center" width="140" />
        <el-table-column label="所属客户" prop="company_name" align="center" width="100" /> -->
        <el-table-column label="Fuel surchage/燃油附加费" prop="fuel_surchage" align="center" width="79" />
        <el-table-column label="Residential Delivery/住宅地址附加费" prop="residential_delivery" align="center" width="86" />
        <!-- <el-table-column label="AHS/额外处理费" prop="AHS" align="center" width="86" /> -->
        <el-table-column label="Peak - AHS Charge" prop="peak_AHS_charge" align="center" width="86" />
        <el-table-column label="Peak - Oversize Charge/高峰期超尺寸附加费" prop="peak_oversize_charge" align="center" width="86" />
        <el-table-column label="Address Correction/地址修正" prop="address_correction" align="center" width="86" />
        <!-- <el-table-column label="Oversize Charge/超长超尺寸费" prop="oversize_charge" align="center" width="86" /> -->
        <!-- <el-table-column label="Weekday Delivery/工作日派送" prop="weekday_delivery" align="center" width="86" /> -->
        <!-- <el-table-column label="Direct Signature/签名费" prop="direct_signature" align="center" width="86" /> -->
        <el-table-column label="Unauthorized OS/不可发" prop="unauthorized_OS" align="center" width="86" />
        <!-- <el-table-column label="Peak - Unauth Charge" prop="peak_unauth_charge" align="center" width="86" /> -->
        <el-table-column label="Courier Pickup Charge/快递取件费" prop="courier_pickup_charge" align="center" width="86" />
        <el-table-column label="Print Return Label/打印快递面单费用" prop="print_return_label" align="center" width="86" />
        <el-table-column align="center" label="OTHERS" prop="other_fee" />
        <el-table-column align="center" label="Total Amount" prop="increment_fee" />
        <!-- <el-table-column label="Return Pickup Fee/退件费" prop="return_pickup_fee" align="center" width="86" /> -->
        <el-table-column label="应扣额度" prop="surcharge" align="center" width="86" />
        <el-table-column label="确认状态" prop="is_confirm" align="center" width="86">
          <template slot-scope="scope">
            <dic-values :code="scope.row.is_confirm" :dictionaries="confirmList" />
          </template>
        </el-table-column>
        <el-table-column label="实际扣减额度" prop="pay_amount" align="center" width="86" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[50, 100, 200, 500]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import formOperate from '../../../layout/mixin/formOperate'
import dicValues from '@/components/dicTransform/index'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import DownModul from '@/components/DownModul/index.vue'
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'AppendFee',
  components: {
    dicValues,
    DownModul
  },
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 380,
      componentName: 'AppendFee',
      url: '/logistics-transport-order',
      queryParam: {
        company_name: '',
        page: 1,
        limit: 50
      },
      confirmList: [
        {
          code: 0,
          name: '未确认'
        },
        {
          code: 1,
          name: '已确认'
        }
      ],
      exportUrl: '/logistics-transport-order-export',
      optionsModul: [
        {
          key: 'transport_order_no',
          label: '运单号'
        },
        {
          key: 'logistics_company',
          label: '所属物流公司'
        },
        {
          key: 'invoice_order_no',
          label: '所属发货单'
        },
        {
          key: 'order_no',
          label: '订单编号'
        },
        {
          key: 'platform_order_no',
          label: '平台订单编号'
        },
        {
          key: 'company_name',
          label: '所属客户'
        },
        {
          key: 'fuel_surchage',
          label: '燃油附加费'
        },
        {
          key: 'residential_delivery',
          label: '住宅地址附加费'
        },
        {
          key: 'AHS',
          label: '额外处理费'
        },
        {
          key: 'peak_AHS_charge',
          label: 'Peak-AHS Charge'
        },
        {
          key: 'address_correction',
          label: '地址修正'
        },
        {
          key: 'oversize_charge',
          label: '超长超尺寸费'
        },
        {
          key: 'peak_oversize_charge',
          label: '高峰期超尺寸附加费'
        },
        {
          key: 'weekday_delivery',
          label: '工作日派送'
        },
        {
          key: 'direct_signature',
          label: '签名费'
        },
        {
          key: 'unauthorized_OS',
          label: '不可发'
        },
        {
          key: 'peak_unauth_charge',
          label: 'Peak - Unauth Charge'
        },
        {
          key: 'courier_pickup_charge',
          label: '快递取件费'
        },
        {
          key: 'print_return_label',
          label: '打印快递面单费用'
        },
        {
          key: 'return_pickup_fee',
          label: '退件费'
        },
        {
          key: 'surcharge',
          label: '应扣额度'
        }
      ]
    }
  },
  methods: {
    // 导出
    handleExport() {
      const vm = this
      const { company_name } = vm.queryParam
      const params = { company_name }
      //   vm.handleExportxlsx(vm.exportUrl, params)
      vm.downLoadParams = params
      vm.formVisibleDown = true
    },
    // 确定
    handleConfirm() {
      const vm = this
      if (vm.selectedIds.length <= 0) {
        vm.$message.error('请至少选择一条数据')
        return
      }
      const every = vm.data.filter(e => vm.selectedIds.includes(e.id)).every(e => e.is_confirm === 0)
      if (!every) {
        return vm.$message.error('所选数据必须是未确认状态')
      }
      vm.$confirm(`确定要确认吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vm.$http.post('/logistics-transport-order/confirm', { ids: vm.selectedIds }).then(res => {
          vm.$message.success('确认成功')
          vm.getList()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
